import React, {useEffect, useRef, useState} from 'react';
import {Button, Drawer, message, Popconfirm} from 'antd';
import {PlusOutlined} from "@ant-design/icons";
import {deletePageSqlConfig, pageSqlColumnList, pageSqlConfigList} from "@/services/wms-dev-tool/business-page-list";
import {ActionType, ProColumns, ProTable} from "@ant-design/pro-components";
import {useRequest} from "@@/plugin-request";
import SqlConfigAddForm from "@/pages/BusinessPageList/components/SqlConfigAddForm";
import SqlConfigUpdateForm from "@/pages/BusinessPageList/components/SqlConfigUpdateForm";
import SqlEditForm from "@/pages/BusinessPageList/components/SqlEditForm";

const SqlConfigListDrawer = (props: any) => {

    const actionRef = useRef<ActionType>();
    const [addFormOpen, handleAddFormOpen] = useState<boolean>(false);
    const [updateFormOpen, handleUpdateFormOpen] = useState<boolean>(false);
    const [currentRow, setCurrentRow] = useState<API.PageSqlConfig>();
    const [sqlEditFormOpen, handleSqlEditFormOpen] = useState<boolean>(false)

    //刷新表格
    const refreshTable = () => {
        if (actionRef.current) {
            actionRef.current.reload();
        }
    }

    const onClose = () => {
        props.handleSclDrawerOpen(false)
    };

    useEffect(() => {
        // 在 props 变化时更新 state
        if (props.sclDrawerOpen) {
            refreshTable()
        }
    }, [props.sclDrawerOpen]);

    const {run: delRun} = useRequest(deletePageSqlConfig, {
        manual: true,
        onSuccess: () => {
            message.success("删除成功")
            refreshTable()
        },
    })


    //定义表格的数据列
    const columns: ProColumns<API.PageSqlConfig>[] = [
        {
            title: <span>SQL编码</span>,
            dataIndex: 'code',
            ellipsis: true,
            search: {
                transform: (value) => {
                    return {code: `*${value}*`}
                }
            }
        },
        {
            title: <span>描述信息</span>,
            dataIndex: 'description',
            ellipsis: true,
            search: false
        },
        {
            title: <span>内容</span>,
            dataIndex: 'sqlContent',
            ellipsis: true,
            search: false
        },
        {
            title: <span>操作</span>,
            dataIndex: 'option',
            valueType: 'option',
            render: (dom, record) => [
                <a key="edit"
                   onClick={() => {
                       handleUpdateFormOpen(true);
                       setCurrentRow(record);
                   }}>编辑</a>,
                <a key="sqlEdit"
                 onClick={() => {
                   handleSqlEditFormOpen(true);
                   setCurrentRow(record);
                 }}>编写SQL</a>,
                <Popconfirm
                    key="delete"
                    title="提示"
                    description="是否删除该条记录？请确认你在其他地方没有引用该语句！"
                    onConfirm={() => delRun(record.id)}
                    okText="是"
                    cancelText="否">
                    <a>删除</a>
                </Popconfirm>
            ],
        },
    ];

    // @ts-ignore
    return (
        <>
            <Drawer title={props.payload.pageName} placement="right" open={props.sclDrawerOpen} onClose={onClose}
                    width="1000px">
                <ProTable<API.PageSqlConfig, API.PageParams>
                    headerTitle={<span>SQL语句配置</span>}
                    actionRef={actionRef}
                    rowKey="id"
                    search={{
                        labelWidth: 120,
                    }}
                    toolBarRender={() => [
                        <Button
                            type="primary"
                            key="primary"
                            onClick={() => {
                                handleAddFormOpen(true);
                            }}>
                            <PlusOutlined/>新建
                        </Button>,
                    ]}
                    request={(params: any, sort, filter) => {
                        params.pageId = props.payload.pageId
                        return pageSqlConfigList(params, sort, filter);
                    }}
                    columns={columns}
                />
            </Drawer>
            <SqlConfigAddForm payload={{pageId: props.payload.pageId}} addFormOpen={addFormOpen}
                              handleAddFormOpen={handleAddFormOpen} ok={refreshTable}></SqlConfigAddForm>
            <SqlConfigUpdateForm
                updateFormOpen={updateFormOpen}
                handleUpdateFormOpen={handleUpdateFormOpen}
                ok={refreshTable}
                values={currentRow || {}}
            />
            <SqlEditForm
              sqlEditFormOpen={sqlEditFormOpen}
              handleSqlEditFormOpen={handleSqlEditFormOpen}
              ok={refreshTable}
              values={currentRow || {}}
            />
        </>
    );
};

export default SqlConfigListDrawer;
